<template>
  <div class="checkout-address">
    <div class="text">
      <div v-if="!showAddress" class="none">
        您需要先添加收货地址才可提交订单。
      </div>
      <ul v-if="showAddress">
        <li>
          <span>
            收
            <i />
            货
            <i />
            人：
          </span>
          {{ showAddress.receiver }}
        </li>
        <li>
          <span>联系方式：</span>
          {{ showAddress.contact }}
        </li>
        <li>
          <span>收货地址：</span>
          {{ showAddress.fullLocation.replace(/ /g, '') + showAddress.address }}
        </li>
      </ul>
      <a
        @click="openAddressEdit(showAddress)"
        v-if="showAddress"
        href="javascript:;"
      >
        修改地址
      </a>
    </div>
    <div class="action">
      <XtxButton
        @click="
          () => {
            visible = true
            selectedAddress = showAddress
          }
        "
        class="btn"
      >
        切换地址
      </XtxButton>
      <XtxButton @click="openAddressEdit({})" class="btn">添加地址</XtxButton>
    </div>
  </div>
  <!-- 添加地址 -->
  <address-edit ref="addressEditCom" @on-success="getAddressList" />
  <!-- 修改地址 -->
  <xtx-dialog title="切换收货地址" v-model="visible">
    <!-- 地址列表 -->
    <div
      class="text item"
      @click="selectedAddress = item"
      v-for="item in addressList"
      :class="{ active: selectedAddress?.id === item.id }"
      :key="item.id"
    >
      <ul>
        <li>
          <span>
            收
            <i />
            货
            <i />
            人：
          </span>
          {{ item.receiver }}
        </li>
        <li>
          <span>联系方式：</span>
          {{ item.contact }}
        </li>

        <li>
          <span>收货地址：</span>
          {{ item.fullLocation + item.address }}
        </li>
      </ul>
    </div>
    <template #footer>
      <XtxButton
        @click="visible = false"
        type="gray"
        style="margin-right: 20px;"
      >
        取消
      </XtxButton>
      <XtxButton @click="confirmAddress" type="primary">确认</XtxButton>
    </template>
  </xtx-dialog>
</template>
<script setup>
import { findAddressList } from '@/api/order'
import AddressEdit from './address-edit.vue'

const { ref } = require('@vue/reactivity')

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
const emit = defineEmits(['change'])

// 选中的商品
const selectedAddress = ref(null)

// 显示的地址
const showAddress = ref(null)
if (props.list.length) {
  // 找出默认地址
  const defineAddress = props.list.find((item) => item.isDefault === 0)
  // 没有值则取第一个
  if (!defineAddress) showAddress.value = props.list[0]
  // 有就直接使用默认地址
  showAddress.value = defineAddress
}

// 组件初始化后将地址 id 通知给结算组件
emit('change', showAddress.value?.id)

const visible = ref(false)

// 添加收货地址组件
const addressEditCom = ref(null)
const openAddressEdit = (address) => {
  addressEditCom.value.open(address)
}

// 确认地址
const confirmAddress = () => {
  visible.value = false
  // 更新显示地址
  showAddress.value = selectedAddress.value
  // 组件初始化后将地址 id 通知给结算组件
  emit('change', showAddress.value?.id)
}

// 地址列表
const addressList = ref(props.list)
// 获取最新收货地址列表 - 地址添加或修改的时候触发这个函数
const getAddressList = (data) => {
  // 根据最新的数据去旧地址里面查找有无相同id
  // 有就更新数据，反之添加
  const oldAdd = addressList.value.find((item) => item.id === data.id)
  if (oldAdd) {
    for (let k in oldAdd) {
      oldAdd[k] = data[k]
    }
  } else {
    // 更新最新的地址列表
    addressList.value.unshift(data)
    showAddress.value = data
  }
}
</script>
<style scoped lang="less">
.xtx-dialog {
  :deep(.wrapper) {
    .body {
      height: 400px;
      overflow: auto;
    }
  }
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    &.item {
      border: 1px solid #f5f5f5;
      margin-bottom: 10px;
      cursor: pointer;
      &.active,
      &:hover {
        border-color: @xtxColor;
        background: lighten(@xtxColor, 50%);
      }
      > ul {
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
}
.checkout-address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
</style>
